weex animation模块 使用指南 | 您所在的位置:网站首页 › weex 动画麻烦 › weex animation模块 使用指南 |
本节学习目标
掌握内置组件animation的使用 我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下 平移 旋转 缩放 背景颜色改变 组件透明图weex 提供了一animition模块,通过这个模块的一个api可以实现上述的动画效果 API:transition(el, options, callback) 参数说明 1.el 执行动画组件的引用(ref="el"),通过this.$refs.el获取组件的引用 2.options 是一个对象,通常由四部分组成, styles 设置不同样式过渡效果的键值对,值也是一个对象 duration:动画持续时间 delay:动画延时执行时间 timingFunction:过渡效果 3.callback动画执行完的回调 下面是一个使用例子 animation.transition(el,{ styles:{ transform: 'translate(250px, 100px)', transformOrigin: 'center center' },duration: 800, //ms timingFunction: 'ease', delay: 0 //ms },res=>{})
下面讲解一下四个键值对的使用 styles它可以设置的键为 键描述值默认值 width 动画执行后应用到组件上的宽度值 int(如100)不使用单位 无 height 动画执行后应用到组件上的高度值 int(如100)不使用单位 无 backgroundColor 动画执行后应用到组件上的背景颜色 string none opacity 动画执行后应用到组件上的不透明度值 介于 0 到 1 间的数值 1 transformOrigin 定义变化过程的中心点. 参数 x-aris 可能的值为 left、center、right、长度值或百分比值, 参数 y-axis 可能的值为 top、center、bottom、长度值或百分比值 x-axis y-axis center center transform 定义应用在元素上的变换类型,支持下表列出的属性 object 无注意 transformOrigin 这个值会影响动画的效果 如果你设置值为 “left top” 那么当旋转的时候,就不会是沿着中心点旋转,而是沿着左上角旋转 下面我们重点说一下transform 的使用 名称描述值类型默认值 translate/translateX/translateY 指定元素移动的偏移量 像素值或百分比 无 rotate 指定元素将被旋转的角度,单位是度(deg) number 无 scale/scaleX/scaleY 按比例放大或缩小元素 number 无下面是一些使用案例 transform:"translate(100,200)"// 沿x轴移动100px,y移动200px transform:'translate(50%, 100)' // 沿x轴移动自身宽度的50%,沿y轴移动100px transform: 'rotate(180deg)' // 注意一定要加上单位degduration 动画持续时间,单位是毫秒ms 单位可以不用写 duration: 800//800mstimingFunction 过渡效果有五种,最常用的是前四种 linear 匀速的过渡 ease-in 由慢到快的加速过渡 ease-out 由块到慢的减速过渡 ease-in-out 先加速后减速的过渡效果 cubic-bezier(x1, y1, x2, y2),三次贝塞尔函数中定义变化过程 取值范围0-1 先说步骤 Step1. 里引入的内置模块(animation) const animation = weex.requireModule('animation') Step2.获取组件的引用 var el = this.$refs.test;如何给组件设置引用 字 Step3.执行动画 animation.transition(el,{ styles:{ transform: 'rotate(3.14)', transformOrigin: 'center center' },duration: 800, //ms timingFunction: 'ease', delay: 0 //ms },res=>{})本节的内容到这里就讲完了,请动手实战一下吧! |
CopyRight 2018-2019 实验室设备网 版权所有 |